﻿@page "/user-profile/{Id}"
@using BlazorHero.CleanArchitecture.Shared.Constants.Role
@inject Microsoft.Extensions.Localization.IStringLocalizer<UserProfile> _localizer

<HeroTitle Title="@Title" Description="@Description" />
@if (!_loaded)
{
    <MudProgressCircular Color="Color.Primary" Indeterminate="true" />
}
else
{
    <MudGrid>
        <AuthorizeView Roles="@RoleConstants.AdministratorRole">
            <MudItem xs="12" sm="12" md="12">
                <MudCard Elevation="25">
                    <MudCardHeader>
                        <CardHeaderContent>
                            <MudText Typo="Typo.body1">@_localizer["Administrator Settings."]</MudText>
                            <MudText Typo="Typo.body2">@_localizer["This is an Administrator Only View."]</MudText>
                        </CardHeaderContent>
                    </MudCardHeader>
                    <MudCardContent Class="pa-46" Style="padding:26px!important">
                        <MudGrid>
                            <MudCheckBox @bind-Checked="@_active" Label="@_localizer["Active?"]" Color="Color.Primary"></MudCheckBox>
                            <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto" OnClick="ToggleUserStatus" ButtonType="ButtonType.Submit">@_localizer["Save Changes"]</MudButton>
                        </MudGrid>
                    </MudCardContent>
                </MudCard>
            </MudItem>
        </AuthorizeView>
        <MudItem xs="12" sm="4" md="3">
            <MudCard Elevation="25">
                <MudCardHeader>
                    <CardHeaderContent>
                        <MudText>@_localizer["Profile"]</MudText>
                    </CardHeaderContent>
                </MudCardHeader>
                <MudCardContent>
                    <div class="d-flex justify-center mb-4">
                        @if (!string.IsNullOrEmpty(@ImageDataUrl))
                        {
                            <MudAvatar Image="@ImageDataUrl" Style="height:250px; width:250px;"> </MudAvatar>
                        }
                        else
                        {
                            <MudAvatar Color="Color.Secondary" Style="height:250px; width:250px;">@_firstLetterOfName</MudAvatar>
                        }
                    </div>
                    <MudText Typo="Typo.h6" Align="Align.Center">@_firstName @_lastName</MudText>
                    <MudText Align="Align.Center">@_email</MudText>
                </MudCardContent>
            </MudCard>
        </MudItem>
        <MudItem xs="12" sm="8" md="9">
            <MudCard Elevation="25">
                <MudCardHeader>
                    <CardHeaderContent>
                        <MudText>@_localizer["Public Profile"]</MudText>
                    </CardHeaderContent>
                </MudCardHeader>
                <MudCardContent>
                    <MudGrid>
                        <MudItem xs="12" md="6">
                            <MudField Label="@_localizer["First Name"]" Variant="Variant.Text">@_firstName</MudField>
                        </MudItem>
                        <MudItem xs="12" md="6">
                            <MudField Label="@_localizer["Last Name"]" Variant="Variant.Text">@_lastName</MudField>
                        </MudItem>
                        <MudItem xs="12" md="6">
                            <MudField Label="@_localizer["Phone Number"]" Variant="Variant.Text">@_phoneNumber</MudField>
                        </MudItem>
                        <MudItem xs="12" md="6">
                            <MudField Label="@_localizer["Email"]" Variant="Variant.Text">@_email</MudField>
                        </MudItem>
                    </MudGrid>
                </MudCardContent>
            </MudCard>
        </MudItem>
    </MudGrid>
}